<template>
  <view>
    <uni-popup class="van-popup" ref="popup" :type="position" :style="props.style" :is-mask-click="true" @change="handleChange">
      <slot></slot>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, watch} from 'vue';
// 定义响应式数据，使用ref而不是reactive
const popup = ref(null);

// 定义emit事件
const emit = defineEmits(['update:modelValue', 'closed']);

// 定义props
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  checked: {
    type: Boolean,
    default: false
  },
  position: {
    type: String,
    default: 'bottom'
  },
  style: {
    type: Object,
    default: ()=>{}
  }
});

// 监听props的变化
watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    open();
  } else {
    closed();
  }
});

// 定义方法
const handleChange = ({ show, type }) => {
  emit('update:modelValue', show);
};

const open = () => {
  if (popup.value) {
    popup.value.open();
  }
};

const closed = () => {
  emit('closed');
  if (popup.value) {
    popup.value.close();
  }
};
</script>

<style lang="scss" scoped>
.uni-popup {
  z-index: 9999;

  :deep(.uni-popup__wrapper) {
    background-color: #fff !important;
    border-radius: 16px 16px 0 0;
    max-height: 88vh;
    overflow-y: auto;
  }
  :deep(uni-view[name=content]) {
    transform: translateY(0%) !important;
  }
}
</style>